/*
 * @Author: kanglang
 * @Date: 2021-02-23 11:22:57
 * @LastEditors: kanglang
 * @LastEditTime: 2021-05-27 17:51:42
 * @Description:  对公账户信息审核状态
 */

import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  SafeAreaView,
  TouchableOpacity,
  TextInput,
} from 'react-native';
import {
  px2dp,
  mainBgColorWhite,
  fontColorBlack,
  mainBgColorLightGray,
  screenWidth,
} from '@/styles';
import { msg, XMListView, XMEmpty } from '@/common';
import { empty03, searching, leftBack } from '@/images';

export default class B2BCorporateAccountBankSelect extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bankName: null,
      type: '',
    };
  }

  componentDidMount() {
    const { navigation } = this.props;
    const state = navigation.state || {};
    const params = state.params || {};
    const { type, bankName } = params;
    this.setState({ type, bankName });
  }

  render() {
    const { bankName, type } = this.state;
    let url = '';

    if (type == 'openBank') {
      url = 'paytrade-api/api/v1/paytrade/bank/pageBankName';
    } else if (type == 'openBankBranch') {
      url = 'paytrade-api/api/v1/paytrade/bank/pageOpenBankIdLikeName';
    } else {
      return null;
    }
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.searchWrap}>
          <TouchableOpacity
            style={styles.leftImgWrap}
            activeOpacity={0.8}
            onPress={() => {
              msg.emit('router: back');
            }}
          >
            <Image
              source={leftBack}
              style={styles.backImg}
              resizeMode='stretch'
            />
          </TouchableOpacity>
          <View style={styles.searchInputWrap}>
            <Image
              source={searching}
              style={styles.searchImg}
              resizeMode='stretch'
            />
            <TextInput
              style={styles.searchInput}
              placeholder='开户行搜索'
              value={bankName}
              onChangeText={(val) => {
                this.setState({ bankName: val });
              }}
            />
          </View>
        </View>

        <XMListView
          url={url}
          methods='POST'
          params={{ bankName }}
          pageSize='20'
          dataPropsName='data.records'
          renderRow={(item) => this._renderItem(item)}
          numColumns={1}
          renderEmpty={() => (
            <XMEmpty
              emptyImg={empty03}
              desc='对不起，暂未搜索到该支行'
              boxStyle={{ marginTop: px2dp(248) }}
            />
          )}
        />
      </SafeAreaView>
    );
  }

  _renderItem = (item) => {
    const { type } = this.state;
    return (
      <TouchableOpacity
        style={styles.bankItemWrap}
        activeOpacity={0.8}
        onPress={() => {
          msg.emit('bankDataSelect', Object.assign(item, { type }));
          msg.emit('router: back');
        }}
      >
        <Text style={styles.bankName}>
          {type == 'openBank' ? item.name : item.bankNameInfo}
        </Text>
      </TouchableOpacity>
    );
  };

  // 输入框变化监听
  onChange = (type, value) => {
    this.setState({ [type]: value });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: mainBgColorWhite,
  },
  searchWrap: {
    width: screenWidth,
    height: px2dp(88),
    flexDirection: 'row',
    paddingRight: px2dp(32),
    marginVertical: px2dp(12)
  },
  leftImgWrap: {
    width: px2dp(84),
    justifyContent: 'center',
    alignItems: 'center',
  },
  backImg: {
    width: px2dp(34),
    height: px2dp(34),
  },
  searchImg: {
    width: px2dp(36),
    height: px2dp(36),
    marginRight: px2dp(10),
  },
  searchInputWrap: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
    paddingHorizontal: px2dp(24),
    borderRadius: px2dp(12),
  },
  searchInput: {
    flex: 1,
  },
  bankItemWrap: {
    width: screenWidth,
    height: px2dp(104),
    justifyContent: 'center',
    paddingHorizontal: px2dp(32),
  },
  bankName: {
    fontSize: px2dp(28),
    color: fontColorBlack,
  },
});
